import React,{useState} from 'react'
import Head from 'next/head'
import {Row,Col,List,Breadcrumb} from 'antd'
import {CalendarOutlined,HomeOutlined} from '@ant-design/icons'
import Header from '../components/header'
import style from '../styles/pages/index.module.css'
import Author from '../components/author'
import Advert from '../components/advert'
import Footer from '../components/footer'
import { sendActionGet } from '../utils/axios'
import { ArticleListAPI } from '../utils/api'
import Link from 'next/link'
import moment from 'moment'

const MyList =(list)=>{

    const [myList,setMyList] = useState(list.data)

    return(
        <>
        <Head>
            <title>文章列表</title>
        </Head>
        <Header/>

        <Row className="common-main" type="flex" justify="center">
            <Col xs={24} sm={24} md={16} lg={18} xl={14} className="common-left">

                <div className={style.breadcontainer}>
                <Breadcrumb>
                    <Breadcrumb.Item href="/"><HomeOutlined/><span>首页</span></Breadcrumb.Item>
                    <Breadcrumb.Item>笔记</Breadcrumb.Item>
                </Breadcrumb>
                </div>

                <List
                    header={<div className={style.Listtitle}>最新文章</div>}
                    dataSource={myList}
                    itemLayout="vertical"
                    renderItem={(item)=>{
                        return(
                            <List.Item>
                                <div className={style.title}>
                                <Link href={{pathname:'/detail',query:{id:item.id}}}>
                                <a>{item.title}</a>
                                </Link>
                                </div>
                                <div className={style.icon}>
                                    <CalendarOutlined/>发布时间：{moment(item.addTime).format('YYYY-MM-DD')}
                                </div>
                                <div className={style.text}>{item.introduce}</div>
                            </List.Item>
                        )
                    }}
                />
            </Col>

            <Col xs={0} sm={0} md={7} lg={5} xl={4} className="common-right">
                <Author/>
                <Advert/>
            </Col>

        </Row>
        <Footer/>
        </>
    )
}

MyList.getInitialProps = async ()=>{

    const res = await sendActionGet(ArticleListAPI)
    return res

  }

export default MyList;